<!-- 202230163014仇心怡 -->

<!-- HTML 部分 -->
<!-- 定义文档类型为 HTML5，告诉浏览器以 HTML5 规范解析文档 -->
<!DOCTYPE html>
<html lang="en"><!-- 定义文档的语言为英语 -->
	<head>
		<!-- 设置文档字符编码为 UTF-8，确保中文和其他字符正确显示 -->
		<meta charset="UTF-8" />
		<!-- 设置视口的宽度为设备宽度，确保页面在移动设备上的响应式布局 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 设置浏览器标签栏的图标 -->
		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
		<!-- 引入Axios库，通过它可以发送HTTP请求（用于登录和注册请求） -->
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
		<!-- 引入layui库，layui是一个前端UI框架，提供弹窗、表单、布局等功能 -->
		<script src="./layui/layui.js"></script>
		<!-- 引入layui的CSS文件，来应用样式 -->
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<!-- 设置页面标题，显示在浏览器标签栏 -->
		<title>全国高校信息查询系统</title>

		<style>
			/* 内联的 CSS 样式，主要定义了页面的布局、字体、背景等 */
			* {
				/* 重置所有元素的外边距和内边距 */
				margin: 0;
				padding: 0;
			}

			a {
				/* 去掉所有链接的下划线 */
				text-decoration: none;
			}

			input,
			button {
				/* 设置输入框和按钮的背景透明，无边框和轮廓 */
				background: transparent;
				border: 0;
				outline: none;
			}

			body {
				/* 设置页面的高度为 100%（视口高度），背景为渐变色，使用 Flexbox 使页面内容居中显示 */
				height: 100vh;
				background: linear-gradient(#141e30, #243b55);
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 16px;
				color: #fff;
			}

			.loginBox {
				/* 设置登录框的样式，包括背景色、圆角、阴影、内边距等 */
				width: 400px;
				height: 364px;
				background-color: rgba(161, 175, 201, 0.6);
				margin: 100px auto;
				border-radius: 10px;
				box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.6);
				padding: 40px;
				box-sizing: border-box;
			}

			h2 {
				text-align: center;
				color: aliceblue;
				margin-bottom: 30px;
				font-family: "Courier New", Courier, monospace;
			}

			.item {
				height: 45px;
				border-bottom: 1px solid #fff;
				margin-bottom: 40px;
				position: relative;
			}

			.item input {
				width: 100%;
				height: 100%;
				color: #000000;
				padding-top: 20px;
				box-sizing: border-box;
			}

			.item input:focus+label,
			.item input:valid+label {
				top: 0px;
				font-size: 2px;
			}

			.item label {
				position: absolute;
				left: 0;
				top: 12px;
				transition: all 0.5s linear;
			}

			.btn {
				/* 设置按钮的样式，包括背景色、边距、文字样式和特效（按钮点击时的动画效果） */
				padding: 10px 20px;
				margin-top: 30px;
				color: #fff;
				position: relative;
				overflow: hidden;
				text-transform: uppercase;
				letter-spacing: 2px;
				left: 13%;
			}

			.btn:hover {
				border-radius: 5px;
				color: #000000;
				background: #fff;
				box-shadow: 0 0 5px 0 #fff, 0 0 25px 0 #fff, 0 0 50px 0 #fff,
					0 0 100px 0 #fff;
				transition: all 1s linear;
			}

			.btn>span {
				position: absolute;
			}

			.btn>span:nth-child(1) {
				width: 100%;
				height: 2px;
				background: -webkit-linear-gradient(left, transparent, #fff);
				left: -100%;
				top: 0px;
				animation: line1 1s linear infinite;
			}

			@keyframes line1 {

				50%,
				100% {
					left: 100%;
				}
			}

			.btn>span:nth-child(2) {
				width: 2px;
				height: 100%;
				background: -webkit-linear-gradient(top, transparent, #fff);
				right: 0px;
				top: -100%;
				animation: line2 1s 0.25s linear infinite;
			}

			@keyframes line2 {

				50%,
				100% {
					top: 100%;
				}
			}

			.btn>span:nth-child(3) {
				width: 100%;
				height: 2px;
				background: -webkit-linear-gradient(left, #fff, transparent);
				left: 100%;
				bottom: 0px;
				animation: line3 1s 0.75s linear infinite;
			}

			@keyframes line3 {

				50%,
				100% {
					left: -100%;
				}
			}

			.btn>span:nth-child(4) {
				width: 2px;
				height: 100%;
				background: -webkit-linear-gradient(top, transparent, #fff);
				left: 0px;
				top: 100%;
				animation: line4 1s 1s linear infinite;
			}

			@keyframes line4 {

				50%,
				100% {
					top: -100%;
				}
			}

			body {
				background-image: url("./bg.jpg");
				background-size: 100% 100%;
			}
		</style>
	</head>

	<!-- 页面主体部分 -->
	<body>
		<div class="loginBox"><!-- 登录框的容器 -->
			<h2>全国高校信息查询系统</h2><!-- 页面标题，显示系统名称 -->
			<!-- 表单元素，但实际上没有提交表单，而是通过 JavaScript 处理表单数据 -->
			<div action="/login" method="post">
				<!-- 每个输入框的样式，包括用户名和密码的输入框，以及对应的标签 -->
				<div class="item">
					<input type="text" name="username" required />
					<label for="">用户名</label>
				</div>
				<div class="item">
					<input type="password" name="password" required />
					<label for="">密码</label>
				</div>
				<!-- 登录按钮，点击后会触发登录操作 -->
				<button class="btn" id="login">
					登录
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</button>
				&emsp;&emsp;&emsp;&emsp;&emsp;
				<!-- 注册按钮，点击后会弹出注册表单 -->
				<button class="btn" id="register">
					注册
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</button>
			</div>
		</div>
	</body>
	<script>
		// JavaScript 部分
		// //username默认是admin
		// document.querySelector('input[type="text"]').value = "admin";
		// //password默认是admin
		// document.querySelector('input[type="password"]').value = "admin";
		// 为登录按钮添加点击事件监听
		document.querySelector("#login").onclick = function() {
			let username = document.querySelector('input[type="text"]').value;
			let password = document.querySelector('input[type="password"]').value;
			// 向服务器发送登录请求
			axios
				.post("/login", {
					username,
					password,
				})
				.then((res) => {
					if (res.data.code === 0) {
						//如果登录成功，显示登录成功消息，并将用户角色保存在localStorage中，然后跳转到/sys页面
						layer.msg("登录成功");
						localStorage.setItem("role", res.data.data.type);
						setTimeout(function() {
							window.location.href = "/sys";
						}, 1000);
					} else {
						//否则显示错误消息
						layer.msg(res.data.msg);
					}
				});
		};
		// 为注册按钮添加点击事件监听
		document.querySelector("#register").onclick = function() {
			layui.use("layer", function() {
				var layer = layui.layer;
				// 创建一个弹出框，包含用户名和密码输入框，以及注册按钮
				layer.open({
					type: 1,
					title: "注册",
					area: ["350px", "280px"],
					content: `<div style="padding: 20px;color:black"><input type="text" id="username1" placeholder="请输入用户名" style="width: 300px;height: 30px;margin-bottom: 20px;"><input type="password" id="password1" placeholder="请输入密码" style="width: 300px;height: 30px;margin-bottom: 20px;">
			        <input type="password" id="password2" placeholder="请再次输入密码" style="width: 300px;height: 30px;margin-bottom: 20px;">
					<button id="add-user" style="width: 300px;height: 30px;background-color: #409eff;color: white;border-radius: 5px;">注册</button>
					</div>`,
				});
				// 当用户点击注册按钮时，验证输入的数据（用户名和密码不能为空，且两次密码一致）
				document.querySelector("#add-user").onclick = function() {
					let username = document.querySelector("#username1").value;
					let password = document.querySelector("#password1").value;
					let password2 = document.querySelector("#password2").value;
					if (username == "" || password == "") {
						layer.msg("用户名或密码不能为空");
						return;
					}
					if (password != password2) {
						layer.msg("两次密码不一致");
						return;
					}

					// 发送注册请求，如果注册成功，显示成功消息，关闭弹窗
					axios
						.post("/add-user", {
							username,
							password,
						})
						.then((res) => {
							if (res.data.code === 0) {
								layer.msg("注册成功");
								//关闭弹窗
								setTimeout(function() {
									layer.closeAll();
								}, 1000);
							} else {
								layer.msg(res.data.msg);
							}
						});
				};
			});
		};
	</script>
</html>